<!-- 导航 -->
<template>
  <nav id="tabs">
    header
  </nav>
</template>

<script>
export default {
  name: "Tabs",
  data(){
    return {
      tipsText:"全屏展示"
    }
  },
  computed: {
    getRouter() {
      return [
        {
          name: "总览",
          path: "/home",
          id: 9,
        },
        {
          name: "历史数据",
          path: "/historyData",
          id: 3,
        },
        {
          name: "碳监测分析",
          path: "/analysis",
          id: 7,
        },
        {
          name: "能耗管理",
          path: "/admin",
          id: 5,
        },
        {
          name: "碳排放/达峰分析",
          path: "/discharge",
          id: 11,
        },
        {
          name: "一点一档",
          path: "/data",
          id: 2,
        },
      ];
    },
  },
  methods: {
    /* 退出账号 */
    selecHander() {
      this.$confirm(`确定退出当前账号吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "dark-messageBox",
      }).then(() => {
        this.$router.push("/login");
        localStorage.clear();
      });
    },
    /* 全屏展示 */
    fullScreen() {
      if (this.tipsText == "全屏展示") {
        this.tipsText = "退出全屏";
        document.documentElement.requestFullscreen();
      } else {
        this.tipsText = "全屏展示";
        document.exitFullscreen();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#tabs {
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // background: url("~@/assets/images/home/header_bg.png") no-repeat;
  background-size: 100% 100%;
  z-index: 10;
  .select_box {
    z-index: 2;
    position: absolute;
    left: 48%;
    ul {
      margin-left: -210px;
      margin-top: 26px;
      .router_item {
        // background: url("~@/assets/images/home/menu_link.png") no-repeat;
        background-size: 6% 80%;
        background-position: left center;
        a {
          padding: 14px 34px;
          width: 100%;
          height: 100%;
          display: block;
          color: #BEB295;
          font-size: 24px;
          font-style: italic;
          box-sizing: border-box;
        }
        .router-link-active {
          color: #FFC600;
          // background: url("~@/assets/images/home/menu_chose_bg.png") no-repeat;
          background-size: 100% 100%;
          text-shadow:2px 2px 10px #FFC600;
        }
      }
    }
  }
  .user_wrap {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 24px;
    right: 16px;
    .news {
      cursor: pointer;
      font-size: 14px;
    }
    .user {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      // background: url("~@/assets/images/home/head.png") no-repeat;
      background-size: 80% 80%;
      background-position: 50% 50%;
      cursor: pointer;
      border-radius: 50%;
    }
  }
}
/deep/.el-message-box{
  .el-message-box__btns{
    display: flex;
    justify-content: center;
    .el-message-box__btns button:nth-child(2){
      margin-left: 0;
    }
  }
}
</style>